<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            left: 0;

        }
    </style>
</head>

<body>
    <div id="box">

    </div>
    <script>
        /*
            运动
                -- 动画--js做动画

                动画原理：
                    通过定时器 不停改变 元素某一个属性 （比如水平移动就改变left）

        
        */

        // 水平的运动

        let box = document.querySelector("#box");

        function animate(el, obj) {


            let timer = setInterval(() => {
                // 当前的left的值

                let arr = [];
                // 获取obj的属性名 
                for (let key in obj) {
                    //key obj的属性名
                    //obj[key] obj的属性值
                    // console.log(key);

                    // [key] 把key的值作为属性名
                    let current = parseInt(getComputedStyle(el)[key]);
                    // console.log(getComputedStyle(el).key);//获取了 'key'这个属性
                    // console.log(current, 'current');
                    // Cannot access 'left' before initialization 不能在初始化之前使用
                    // console.log(left);
                    // 当前值 加1
                    let target = current + 1;

                    console.log(target, 'target', key);


                    // 判断运动结束的条件
                    // 如果传入了多个 属性，一个属性到了 终点的值 就清除了定时器
                    // bug
                    // 多个属性都到终点 再清除

                    if (target !== obj[key]) {
                        // clearInterval(timer);
                        // 把key当做 属性名 修改 el的行内样式
                        el.style[key] = target + 'px';
                        arr.push(false);
                    } else {
                        //说明这个属性
                        console.log(key + ':到了终点值');
                        arr.push(true);


                    }
                }
                // 循环外部判断 是否所有的属性都到了终点值

                console.log(arr);
                // arr中元素都为true 清除定时器
                if (arr.every(v => v === true)) {
                    clearInterval(timer)
                }


            }, 100);
        }
        animate(box, { left: 100 })
        animate(box, { top: 100 })

        // let left = 0;
        // 获取元素  left 的初始值
        // 获取样式 getComputedStyle 得到给样式对象

    </script>

</body>

</html>